<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ajax进度上传</title>
</head>

<body style="color: rgb(17, 72, 72); --bg-color: red">
  <style>
    .container {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      display: flex;
      background-color: red;
      overflow: auto;
      scroll-snap-type: x mandatory;
      scroll-snap-stop: always;
      /* background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 40%, green 60%, blue); */
    }

    .container .item {
      scroll-snap-align: start;
      flex: 1 0 100%;

      /* width: 100%; */
      /* flex: 1; */
      /* flex: 0 0 100px; */
      /* flex: 1 0 auto; */
    }

    p {
      background-color: var(--bg-color);
      color: #000;
      font-size: 1.4em;
      text-align: justify;
      -moz-text-align-last: center;
      text-align-last: center;
    }

    .lable {
      width: 90px;
      text-align: center;
      text-align-last: justify;
    }
  </style>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi perferendis, iste voluptatum, aliquam nam unde
    ipsam explicabo eius eum a praesentium. Earum, maxime! Provident ipsum distinctio harum corporis libero eius!
  </p>
  <div class="lable">手机号</div>
  <div class="container">
    <div>头部</div>
    <div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>
  <button class="btn-share">分享</button>
  <details>
    <summary>点击这里查看更多信息</summary>
    <p>这是隐藏的详细信息。</p>
  </details>



  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    const treeData = [
      {
        label: '交易管理',
        value: 'TRADE',
        children: [
          {
            label: '交易查询',
            value: 'TRADE_LIST',
          },
        ],
      },
      {
        label: '首页',
        value: 'HOME',
      },
      {
        label: '商户管理',
        value: 'MERCHANT',
        children: [
          {
            label: '商户查询',
            value: 'MERCHANT_LIST',
            children: [
              {
                label: '商户查询',
                value: 'MERCHANT_QUERY',
              },
              {
                label: '查看商户详情',
                value: 'MERCHANT_DETAIL',
              },
              {
                label: '新增商户',
                value: 'MERCHANT_ADD',
              },
            ],
          },
        ],
      },
    ];

    // function omit(obj, fields) {
    //   const shallowCopy = Object.assign({}, obj);
    //   for (let i = 0; i < fields.length; i += 1) {
    //     const key = fields[i];
    //     delete shallowCopy[key];
    //   }
    //   return shallowCopy;
    // }

    // const flatTree = (data, childrenKey = 'children') => {
    //   const ret = [];
    //   function recursion(childs, prevArray = []) {
    //     childs.forEach((item) => {
    //       const newValue = [...prevArray, omit(item, [childrenKey])];
    //       if (item[childrenKey]?.length > 0) {
    //         recursion(item[childrenKey], newValue);
    //       } else {
    //         ret.push(newValue);
    //       }
    //     });
    //   }
    //   recursion(data);
    //   return ret;
    // };

    // const res = flatTree(treeData);
    // console.log('res', res);

    // function getMaxCount(treeData) {
    // function fn(treeData) {
    // let arr = [];
    //   treeData.forEach((item) => {
    //     if (item.children?.length) {
    //       arr.push({
    //         value: item.value,
    //         label: item.label,
    //       });
    //       arr.push(...fn(item.children));
    //     } else {
    //       arr.push(item);
    //     }
    //   });
    //   return arr;
    // }
    // fn(treeData);

    //   let max = 1;
    //   let target = 1;
    //   function fn(treeData) {
    //     max = Math.max(max, target);
    //     target += 1;
    //     for (let i = 0; i < treeData.length; i++) {
    //       const item = treeData[i];
    //       console.log('item', item);
    //       if (item.children) {
    //         fn(item.children);
    //       } else {
    //         continue;
    //       }
    //     }
    //   }
    //   fn(treeData);
    //   console.log('max', max);
    //   return max;
    // }
    // getMaxCount(treeData);

    // const getLevel = (arr) => {
    //   let maxLevel = 1;

    //   (function callBack(arr, level) {
    //     level++;
    //     maxLevel = Math.max(level, maxLevel);
    //     for (let i = 0; i <script arr.length; i++) {
    //       const item = arr[i];
    //       if (item.children && item.children) {
    //         callBack(item.children, level);
    //       } else {
    //         continue;
    //       }
    //     }
    //   })(arr, 0);

    //   return maxLevel;
    // };

    // console.log('treeData最大层级：', getLevel(treeData));

    const SYM = Symbol('anim');
    const obj = {
      str: 'llq',
      arr: [1, 2, 3],
      obj: { name: 'llq', age: 25 },
      fn() {
        console.log('this', this);
      },
      date: new Date(),
      und1: null,
      und2: void 0,
      [SYM]: 132132123,
    };
    // 函数 日期 undefined symbol 在JSON转换的时候都会有问题
    // console.log('  JSON.parse(JSON.stringify(obj)); ', JSON.parse(JSON.stringify(obj)));

    const list = [
      { name: 'llq', age: 25 },
      { name: 'llq', age: 25 },
      { age: 25, name: 'llq' },
      { name: 'lxx', age: 25 },
      { name: 'csz', age: 27 },
    ];

    const unique = (arr) => {
      let result = [];
      const equals = (a, b) => {
        if (a === b) return true;
        if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
        if (!a || !b || (typeof a !== 'object' && typeof b !== 'object')) return a === b;
        if (a === null || a === undefined || b === null || b === undefined) return false;
        if (a.prototype !== b.prototype) return false;
        let keys = Object.keys(a);
        if (keys.length !== Object.keys(b).length) return false;
        return keys.every((k) => equals(a[k], b[k]));
      };
      for (let i = 0, len = arr.length; i < len; i++) {
        let isFinded = false;
        for (let k = 0; k < result.length; k++) {
          if (equals(arr[i], result[k])) {
            isFinded = true;
            break;
          }
        }
        if (!isFinded) {
          result.push(arr[i]);
        }
      }
      return result;
    };

    // console.log('unique', unique(list));

    let treeList = [
      { id: '1', text: '一级菜单1', parentId: null },
      { id: '2', text: '一级菜单2', parentId: null },
      { id: '3', text: '一级菜单3', parentId: null },
      { id: '2-1', text: '二级菜单1', parentId: '1' },
      { id: '2-2', text: '二级菜单2', parentId: '2' },
      { id: '2-3', text: '二级菜单3', parentId: '2' },
      { id: '3-2-1', text: '三级菜单1', parentId: '2-1' },
    ];

    // function list2Tree(arr, iid = null) {
    //   let result = [];
    //   arr.forEach((item) => {
    //     if (item.parentId === iid) result.push(item);
    //   });
    //   result.forEach((item) => {
    //     item.children = list2Tree(arr, item.id);
    //     if (item.children.length === 0) delete item.children;
    //   });
    //   return result;
    // }
    // // console.log('list2Tree', list2Tree(treeList));

    // function list2Tree2(arr, pid = null) {
    //   let res = [];
    //   arr.forEach((item) => {
    //     if (item.parentId === pid) {
    //       item.children = list2Tree2(arr, item.id);
    //       res.push(item);
    //     }
    //   });
    //   return res;
    // }
    // // console.log('list2Tree2', list2Tree2(treeList));

    // const treeDatas = [
    //   {
    //     id: '1',
    //     text: '一级菜单1',
    //     parentId: null,
    //     children: [
    //       {
    //         id: '2-1',
    //         text: '二级菜单1',
    //         parentId: '1',
    //         children: [
    //           {
    //             id: '3-2-1',
    //             text: '三级菜单1',
    //             parentId: '2-1',
    //           },
    //         ],
    //       },
    //     ],
    //   },
    //   {
    //     id: '2',
    //     text: '一级菜单2',
    //     parentId: null,
    //     children: [
    //       {
    //         id: '2-2',
    //         text: '二级菜单2',
    //         parentId: '2',
    //       },
    //       {
    //         id: '2-3',
    //         text: '二级菜单3',
    //         parentId: '2',
    //       },
    //     ],
    //   },
    //   {
    //     id: '3',
    //     text: '一级菜单3',
    //     parentId: null,
    //   },
    // ];

    // function treeing(arr) {
    //   const tree = [];
    //   const map = {};
    //   for (let item of arr) {
    //     // 一个新的带children的结构
    //     let newItem = (map[item.id] = {
    //       ...item,
    //       // children: [],
    //     });
    //     if (map[item.parentId]) {
    //       // 父节点已存进map则在父节点的children添加新元素
    //       const parent = map[item.parentId];
    //       if (!parent.children) parent.children = [];
    //       parent.children.push(newItem);
    //       if (parent.children.length === 0) delete parent.children;
    //     } else {
    //       // 没有父节点，在根节点添加父节点
    //       tree.push(newItem);
    //     }
    //   }
    //   return tree;
    // }

    // // console.log('treeing', treeing(treeList));
    // function tree2List(list) {
    //   let res = [];
    //   for (const item of list) {
    //     const { children, ...prop } = item;
    //     if (children?.length) {
    //       res.push(...tree2List(children));
    //     }
    //     res.push(prop);
    //   }
    //   return res;
    // }

    // function flatten2(tree) {
    //   const list = [];
    //   const queue = [...tree];
    //   while (queue.length) {
    //     const node = queue.shift();
    //     const { children = [], ...item } = node;
    //     list.push(item);
    //     if (children?.length) {
    //       queue.push(...children);
    //     }
    //   }
    //   return list;
    // }

    // // console.log('tree2List', tree2List(treeDatas));
    // // console.log('flatTree', flatTree2(treeDatas));
    // // console.log('flatten2', flatten2(treeDatas));

    // const lineXY = [
    //   [
    //     [11, 11],
    //     [22, 22],
    //     [33, 33],
    //     [44, 44],
    //   ],
    //   [
    //     [55, 55],
    //     [66, 66],
    //     [77, 77],
    //     [88, 88],
    //   ],
    //   [
    //     [99, 99],
    //     [100, 100],
    //     [110, 110],
    //     [120, 120],
    //   ],
    // ];

    const lineXY = [
      [1, 2, 3, 'a'],
      [4, 5, 6, 'b'],
      [7, 8, 9, 'c'],
    ];
    // 转化矩阵XY轴
    const transformLineXY = (arr) => arr[0].map((_, index) => arr.map((row) => row[index]));
    const ret = transformLineXY(lineXY);

    // console.log('ret', ret);
    // const arr1 = [
    //   {
    //     name: 'llq-1',
    //     id: '1',
    //   },
    //   {
    //     name: 'llq-2',
    //     id: '2',
    //   },
    // ];

    // const arr2 = [...arr1];

    // arr2[0].name = '李岚清';

    // console.log('arr1', arr1);
    // console.log('arr2', arr2);

    const arr0 = [
      {
        id: '1',
        name: '李岚清-1',
      },
      {
        id: '1',
        name: '李岚清-1',
      },
      {
        id: '2',
        name: '李岚清-2',
      },
      {
        id: '3',
        name: '李岚清-3',
      },
    ];

    // console.log(' _.uniqBy([{ x: 1 }, { x: 2 }, { x: 1 }], x) ', _.uniqBy(arr0, 'id'));

    // 加密前
    // (() => {
    //   function ban() {
    //     setInterval(() => {
    //       Function('debugger')();
    //     }, 50);
    //   }
    //   try {
    //     ban();
    //   } catch (err) { }
    // })();

    // // 加密后
    // eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\b"+d(a)+"\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));

    // 终极增强防调试代码
    // (() => {
    //   function block() {
    //     if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
    //       document.body.innerHTML = '检测到非法调试,请关闭后刷新重试!';
    //     }
    //     setInterval(() => {
    //       (function () {
    //         return false;
    //       })
    //         ['constructor']('debugger')
    //         ['call']();
    //     }, 50);
    //   }
    //   try {
    //     block();
    //   } catch (err) {}
    // })();

    const formData = new FormData();
    formData.append('username', 'John1');
    formData.append('username', 'John2');
    formData.append('password', '123456');
    formData.append('arr', JSON.stringify([1, 2, 3]));
    formData.append('obj', JSON.stringify({ a: 1, b: 2 }));

    console.log('==formData.getAll(username)====>', formData.getAll('username'))
    console.log('==formData.get(username)====>', formData.get('username'))
    console.log('==formData.get(password)====>', formData.get('password'))
    console.log('==formData.get(arr)====>', formData.get('arr'))
    console.log('==formData.get(obj)====>', formData.get('obj'))

    formData.entries().forEach((item) => {
      console.log('==item====>', item)
    });
    document.querySelector('.btn-share').addEventListener('click', function () {
      if (navigator.share) {
        navigator.share({
          title: '分享的标题',
          text: '这是一段分享的文本描述',
          url: 'https://github.com/' // 要分享的链接  
        })
          .then(() => console.log('分享成功！'))
          .catch(error => console.log('分享失败：', error));
      } else {
        console.log('当前浏览器不支持 Web Share API');
      }
    })
  </script>
</body>

</html>